<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding:0;
			}	
			.box1{
				width: 800px;
				height: 800px;
				background-color: silver;
				}
				
			.box1 div{
				width: 100px;
				height: 100px;
				margin-bottom: 100px;
			}
			.box2{
				background-color: #bfa;
				transition: all .2s;
				
				/*
				 * 过渡（transition）
				      通过过渡可以指定一个属性发生变化时的切换方式
				      通过过渡可以创建一些很好的效果，提升用户的体验
				      
				*/
				
				
				/*
				 * transition-property：指定要执行过渡的属性
				 * 	-多个属性间使用，隔开
				 * 	- 如果所有属性都需要过渡，则使用all关键字
				 * 	-大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
				 * 	-transition-property：height，width；
				 * 
				 * transition-duration：指定过渡效果的持续时间
				 * 	-transition-duration：100ms，2s；
				 * 	
				 * */
				
				/*
				 transition-timing-function：过渡的时序函数，指定过渡的执行的方式
				 可选值：
				   ease：默认值 慢速开始，先加速，再减速
				   linear  匀速运动
				   ease-in 加速运动
				   ease-out 减速运动
				   ease-in-out  先加速 后减速 
				   cubic-bezier（）来指定时序函数
				   steps（）分步执行过渡效果
				   		可以设置一个第二个值
				   		  end，在时间结束执行过渡（默认）
				   		  start，在时间开始时执行过渡
				     https：//cubic-bezier.com
					transition-timing-function:cubic-bezier（.24，.95，.82，-0.88）；
					
				   transition-timing-function：steps（2，start）；
				   	意思是分两步，一步需要一秒，start在第一秒开始就执行，end是在第一秒结束时执行
				 
				 */
				
				/*
				 * transition-delay：过渡效果的延迟，等待一段时间后执行过渡
				 *  transition-delay：2s；
				 */
				
				
				/*transition可以同时设置过渡相关的所有属性，只有一个要求，如果写延迟，则两个时间中第一个是持续时间，
				 第二个才是延迟时间*/
				transition-timing-function:ease-in;
				
			}
			
			.box3{
				width: 100px;
				height: 100px;
				background-color: orange;
				transition: all .2s;
			}
			.box1:hover div{
				/*width: 200px;
				height: 200px;*/
				margin-left: 700px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>
